
<template>
  <div id="app">
    <!-- 主应用页面 -->
    <div v-if="isLoggedIn" class="app-container">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <div class="sidebar-header">
          <h2>
            <span>📚</span> 图书管理系统
          </h2>
        </div>
        <ul class="nav-menu">
          <li class="nav-item" :class="{active: currentRoute === 'Dashboard'}" @click="navigateTo('Dashboard')">
            <span>📊</span> 系统概览
          </li>
          <li class="nav-item" :class="{active: currentRoute === 'BookManagement'}" @click="navigateTo('BookManagement')">
            <span>📖</span> 图书管理
          </li>
          <li class="nav-item" :class="{active: currentRoute === 'ReaderManagement'}" @click="navigateTo('ReaderManagement')">
            <span>👥</span> 读者管理
          </li>
          <li class="nav-item" :class="{active: currentRoute === 'AdminManagement'}" @click="navigateTo('AdminManagement')">
            <span>👤</span> 管理员管理
          </li>
          <li class="nav-item" @click="logout">
            <span>🚪</span> 退出登录
          </li>
        </ul>
      </div>

      <!-- 主内容区 -->
      <div class="main-content">
        <router-view></router-view>
      </div>
    </div>

    <!-- 登录页面 -->
    <router-view v-else></router-view>

    <footer>
      <p>图书管理系统 © 2023 | 基于JavaWeb + Vue3 + MySQL</p>
    </footer>
  </div>
</template>
<script>
import { computed, ref, provide } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';

export default {
  name: 'App',

  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();

    // 创建路由器刷新功能
    const isRouterAlive = ref(true);

    const reload = () => {
      isRouterAlive.value = false;
      nextTick(() => {
        isRouterAlive.value = true;
      });
    };

    // 提供 reload 方法给子组件
    provide('reload', reload);

    // 计算属性和方法
// 正确写法 - 使用可选链操作符
    const isLoggedIn = computed(() => store?.state?.auth?.isAuthenticated ?? false);    const currentRoute = computed(() => route.name);

    const navigateTo = (routeName) => {
      router.push({ name: routeName });
    };

    const logout = () => {
      store.dispatch('logout');
      router.push('/login');
    };

    return {
      isRouterAlive,
      isLoggedIn,
      currentRoute,
      navigateTo,
      logout
    };
  }
};
</script>

<style>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --danger-color: #e74c3c;
  --dark-color: #2c3e50;
  --light-color: #ecf0f1;
  --sidebar-width: 250px;
}

body {
  background-color: #f5f7fa;
  color: #333;
  height: 100vh;
  overflow-x: hidden;
}

#app {
  display: flex;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.btn {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-primary {
  background: var(--primary-color);
  color: white;
}

.btn-success {
  background: var(--secondary-color);
  color: white;
}

.btn-danger {
  background: var(--danger-color);
  color: white;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

input, select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.action-buttons {
  display: flex;
  gap: 5px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  position: relative;
}

.close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.close:hover {
  color: #333;
}

.status-available {
  color: var(--secondary-color);
  font-weight: bold;
}

.status-borrowed {
  color: var(--danger-color);
  font-weight: bold;
}

.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background-color: #f8f9fa;
  font-weight: 600;
}

tr:hover {
  background-color: #f8f9fa;
}
</style>
<!--<template>-->
<!--  <div id="app">-->
<!--    &lt;!&ndash; 主应用页面 &ndash;&gt;-->
<!--    <div v-if="isLoggedIn" class="app-container">-->
<!--      &lt;!&ndash; 侧边栏 &ndash;&gt;-->
<!--      <div class="sidebar">-->
<!--        <div class="sidebar-header">-->
<!--          <h2>-->
<!--            <span>📚</span> 图书管理系统-->
<!--          </h2>-->
<!--        </div>-->
<!--        <ul class="nav-menu">-->
<!--          <li class="nav-item" :class="{active: currentRoute === 'Dashboard'}" @click="navigateTo('Dashboard')">-->
<!--            <span>📊</span> 系统概览-->
<!--          </li>-->
<!--          <li class="nav-item" :class="{active: currentRoute === 'BookManagement'}" @click="navigateTo('BookManagement')">-->
<!--            <span>📖</span> 图书管理-->
<!--          </li>-->
<!--          <li class="nav-item" :class="{active: currentRoute === 'ReaderManagement'}" @click="navigateTo('ReaderManagement')">-->
<!--            <span>👥</span> 读者管理-->
<!--          </li>-->
<!--          <li class="nav-item" :class="{active: currentRoute === 'AdminManagement'}" @click="navigateTo('AdminManagement')">-->
<!--            <span>👤</span> 管理员管理-->
<!--          </li>-->
<!--          <li class="nav-item" @click="logout">-->
<!--            <span>🚪</span> 退出登录-->
<!--          </li>-->
<!--        </ul>-->
<!--      </div>-->

<!--      &lt;!&ndash; 主内容区 &ndash;&gt;-->
<!--      <div class="main-content">-->
<!--        <router-view></router-view>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 登录页面 &ndash;&gt;-->
<!--    <router-view v-else></router-view>-->

<!--    <footer>-->
<!--      <p>图书管理系统 © 2023 | 基于JavaWeb + Vue3 + MySQL</p>-->
<!--    </footer>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { computed } from 'vue'-->
<!--import { useRouter, useRoute } from 'vue-router'-->
<!--import { useStore } from 'vuex'-->

<!--export default {-->
<!--  name: 'App',-->
<!--  setup() {-->
<!--    const router = useRouter()-->
<!--    const route = useRoute()-->
<!--    const store = useStore()-->

<!--    const isLoggedIn = computed(() => store.state.auth.isAuthenticated)-->
<!--    const currentRoute = computed(() => route.name)-->

<!--    const navigateTo = (routeName) => {-->
<!--      router.push({ name: routeName })-->
<!--    }-->

<!--    const logout = () => {-->
<!--      store.dispatch('logout')-->
<!--      router.push('/login')-->
<!--    }-->

<!--    return {-->
<!--      isLoggedIn,-->
<!--      currentRoute,-->
<!--      navigateTo,-->
<!--      logout-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<style scoped>
.app-container {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  background: var(--dark-color);
  color: white;
  padding: 20px 0;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.sidebar-header {
  padding: 0 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-menu {
  list-style: none;
  padding: 20px 0;
}

.nav-item {
  padding: 12px 30px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-item:hover, .nav-item.active {
  background: rgba(255,255,255,0.1);
  border-left: 4px solid var(--primary-color);
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

footer {
  text-align: center;
  padding: 20px;
  color: #777;
  border-top: 1px solid #eee;
  margin-top: 30px;
  position: absolute;
  bottom: 0;
  width: calc(100% - var(--sidebar-width));
  left: var(--sidebar-width);
}
</style>